<template>
	<view class="page" ref="page">
		<!-- 搜索 -->
		<view class="search-index">
			<view class="search">
				<view class="iconfont icon-fadajing"></view>
				<input type="text" placeholder="商城推荐好物" />
				<button class="search-button">搜索</button>
			</view>
		</view>
		<!-- 筛选条件 -->
		<view class="select">
			<view class="selected-item" :class="{ 'active': selectedOrderType === 1 }" @click="setOrderType(1)">
				价格
			</view>
			<view class="selected-item" :class="{ 'active': selectedOrderType === 2 }" @click="setOrderType(2)">
				地区
			</view>
			<view class="selected-item" :class="{ 'active': selectedOrderType === 3 }" @click="setOrderType(3)">
				距离
			</view>
			<view class="selected-item" :class="{ 'active': selectedOrderType === 4 }" @click="setOrderType(4)">
				销量
			</view>
			<view class="selected-item" :class="{ 'active': selectedOrderType === 5 }" @click="setOrderType(5)">
				评价
			</view>
		</view>

		<!-- 筛选产品 -->
		<view class="production">
			<view class="production-container">
				<view class="production-item" v-for="(item, index) in filterlist" :key="index">
					<u--image :showLoading="true" radius="20rpx 20rpx 0 0" :src="item.url" width="320rpx"
						height="350rpx"></u--image>
					<u--text margin="10rpx" :text="item.name" size="16"></u--text>
					<u--text margin="10rpx" :text="item.price" color="#9b742f" size="16"
						radius="30rpx">{{ item.price }}</u--text>
				</view>
			</view>

		</view>

	</view>
</template>
<script>
	export default {
		data() {
			return {
				keyword: '', //输⼊框默认值
				orderType: 0, //关键字  0为默认 1按年龄降序 2按年龄降序 3按money升序
				selectedOrderType: null,
				swiperList: [{
						id: 0,
						name: '白玉',
						price: '￥5000',
						type: 'image',
						url: 'https://p3.ssl.qhimgs1.com/sdr/400__/t0485eb72d6fc28e0d9.jpg'
					},
					{
						id: 1,
						name: '血玉',
						price: '￥10000',
						type: 'image',
						url: 'https://p3.ssl.qhimgs1.com/sdr/400__/t0485eb72d6fc28e0d9.jpg'
					},
					{
						id: 2,
						name: '百题玉',
						price: '￥5000',
						type: 'image',
						url: 'https://p3.ssl.qhimgs1.com/sdr/400__/t0485eb72d6fc28e0d9.jpg'
					},


				],
			}
		},
		computed: {
			filterlist() {
				// 取出相关的数据
				const {
					keyword,
					orderType,
					swiperList
				} = this
				// 过滤后显⽰的数据
				let _filterlist
				// 对list_sel进⾏过滤
				_filterlist = swiperList.filter(p => p.name.indexOf(keyword) !== -1) // 搜索筛选
				// 排序 0为默认 1按年龄降序 2按年龄降序 3按money升序
				if (orderType !== 0) {
					_filterlist.sort(function(p1, p2) {
						if (orderType == 1) {
							// 根据money升序
							return p1.money - p2.money
						} else if (orderType == 2) {
							// 根据距离降序
							return p2.id - p1.id
						} else if (orderType == 3) {
							// 根据距离降序
							return p2.id - p1.id
						} else if (orderType == 4) {
							// 根据距离降序
							return p2.id - p1.id
						} else {
							// 根据money升序
							return p1.money - p2.money
						}
					})
				}
				return _filterlist //返回⾃定义的_filterlist
			}
		},
		methods: {
			// 改变orderType的参数
			setOrderType(type) {
				this.selectedOrderType = type;
			},
		}
	}
</script>




<style scoped lang="scss">
	.selected-item {
		cursor: pointer;
		color: #333;
	}

	.selected-item.active {
		color: #e68a00;
		font-weight: bold;
	}

	@import 'shuhua.scss'
</style>